<template>
  <div class="Mv">
    <div class="title">
      <p class="titleFont">{{ props.title }}</p>
      <p
        v-for="area in MvOption"
        :key="area"
        @click="handleActive(area)"
        :class="{
          active: params.area == area || (area == '全部' && !params.area),
        }"
      >
        {{ area }}
      </p>
    </div>
    <gridList :gridListInfo="mv" width="24%" v-if="props.option == 1" />
  </div>
</template>

<script setup lang="ts">
import { reactive, provide } from "vue";
import { useSendReq } from "@/store/sendReq";
import { useThemeColor } from "@/store/themeColor";
import gridList from "@/components/gridList.vue";
const themeColor = useThemeColor();
const sendReq = useSendReq();
const props = defineProps<{
  option: string | number;
  limit: number | string;
  title: string;
}>();
const emit = defineEmits(["handleMv2"]);
provide;
const MvOption = ["全部", "内地", "港台", "欧美", "日本", "韩国"];
const params = reactive({
  limit: props.limit,
  area: "",
});
const mv = reactive<Mv[]>([]);

const handleActive = (area?: string) => {
  const req: any = sendReq;
  const a: Record<string | number, string> = {
    1: "getMvFirst",
    2: "getRecommendMv",
  };
  area && area == "全部" ? (params.area = "") : (params.area = area!);
  req[a[props.option]](params).then((res: any) => {
    mv.length = 0;
    mv.push(...res.data);
    emit("handleMv2", res.data);
  });
};
handleActive();
</script>

<style scoped lang="less">
.active {
  color: v-bind("themeColor.themeFontColor");
}
.Mv {
  padding-top: 20px;
  .title {
    display: flex;
    flex-wrap: wrap;
    p {
      margin: 20px 10px;
      font-size: 18px;
    }
    > p:nth-child(1) {
      margin: 0;
      flex: 100%;
    }
  }
}
</style>
